TypeScript Representing.config方法代码示例

const memory = <D>(initialValue) => {
  return Representing.config({
    store: {
      mode: 'memory',
      initialValue
    }
  });
};

export const renderCustomEditor = (spec: CustomEditorFoo): SimpleSpec => {
  const editorApi = Cell(Option.none());

  const memReplaced = Memento.record({
    dom: {
      tag: spec.tag
    }
  });

  const initialValue = Cell(Option.none());

  return {
    dom: {
      tag: 'div',
      classes: [ 'tox-custom-editor' ]
    },
    behaviours: Behaviour.derive([
      AddEventsBehaviour.config('editor-foo-events', [
        AlloyEvents.runOnAttached((component) => {
          memReplaced.getOpt(component).each((ta) => {
            spec.init(ta.element().dom()).then((ea) => {
              initialValue.get().each((cvalue) => {
                ea.setValue(cvalue);
              });

              initialValue.set(Option.none());
              editorApi.set(Option.some(ea));
            });
          });
        })
      ]),
      Representing.config({
        store: {
          mode: 'manual',
          getValue: () => editorApi.get().fold(
            () => initialValue.get().getOr(''),
            (ed) => ed.getValue()
          ),
          setValue: (component, value) => {
            editorApi.get().fold(
              () => {
                initialValue.set(Option.some(value));
              },
              (ed) => ed.setValue(value)
            );
          }
        }
      }),

      ComposingConfigs.self()
    ]),
    components: [memReplaced.asSpec()]
  };
};

export const renderWordCount = (editor: Editor, providersBackstage: UiFactoryBackstageProviders): SimpleSpec => {
  const replaceCountText = (comp, count, mode) => Replacing.set(comp, [ GuiFactory.text(providersBackstage.translate(['{0} ' + mode, count[mode]])) ]);
  return Button.sketch({
    dom: {
      // The tag for word count was changed to 'button' as Jaws does not read out spans.
      // Word count is just a toggle and changes modes between words and characters.
      tag: 'button',
      classes: [ 'tox-statusbar__wordcount' ]
    },
    components: [ ],
    buttonBehaviours: Behaviour.derive([
      Tabstopping.config({ }),
      Replacing.config({ }),
      Representing.config({
        store: {
          mode: 'memory',
          initialValue: {
            mode: WordCountMode.Words,
            count: { words: 0, characters: 0 }
          }
        }
      }),
      AddEventsBehaviour.config('wordcount-events', [
        AlloyEvents.run(SystemEvents.tapOrClick(), (comp) => {
          const currentVal = Representing.getValue(comp);
          const newMode = currentVal.mode === WordCountMode.Words ? WordCountMode.Characters : WordCountMode.Words;
          Representing.setValue(comp, { mode: newMode, count: currentVal.count });
          replaceCountText(comp, currentVal.count, newMode);
        }),
        AlloyEvents.runOnAttached((comp) => {
          editor.on('wordCountUpdate', (e) => {
            const { mode } = Representing.getValue(comp);
            Representing.setValue(comp, { mode, count: e.wordCount });
            replaceCountText(comp, e.wordCount, mode);
          });
        })
      ])
    ]),
    eventOrder: {
      [SystemEvents.tapOrClick()]: [ 'wordcount-events', 'alloy.base.behaviour' ]
    }
  });
};

export const renderColorPicker = (spec: Types.ColorPicker.ColorPicker): SimpleSpec => {
  const getClass = (key: string) => 'tox-' + key;

  const colourPickerFactory = ColourPicker.makeFactory(translate, getClass);

  const onValidHex = (form) => {
    AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: true },  );
  };

  const onInvalidHex = (form) => {
    AlloyTriggers.emitWith(form, formActionEvent, { name: 'hex-valid', value: false } );
  };

  const memPicker = Memento.record(
    colourPickerFactory.sketch({
      dom: {
        tag: 'div',
        classes: [getClass('color-picker-container')],
        attributes: {
          role: 'presentation'
        }
      },
      onValidHex,
      onInvalidHex
    })
  );

  return {
    dom: {
      tag: 'div'
    },
    components: [
      memPicker.asSpec()
    ],
    behaviours: Behaviour.derive([
      // We'll allow invalid values
      Representing.config({
        store: {
          mode: 'manual',
          getValue: (comp) => {
            const picker = memPicker.get(comp);
            const optRgbForm = Composing.getCurrent(picker);
            const optHex = optRgbForm.bind((rgbForm) => {
              const formValues = Representing.getValue(rgbForm);
              return formValues.hex as Option<string>;
            }) ;
            return optHex.map((hex) => '#' + hex).getOr('');
          },
          setValue: (comp, newValue) => {
            const pattern = /^#([a-fA-F0-9]{3}(?:[a-fA-F0-9]{3})?)/;
            const m = pattern.exec(newValue);
            const picker = memPicker.get(comp);
            const optRgbForm = Composing.getCurrent(picker);
            optRgbForm.fold(() => {
              // tslint:disable-next-line:no-console
              console.log('Can not find form');
            }, (rgbForm) => {
              Representing.setValue(rgbForm, {
                hex: Option.from(m[1]).getOr('')
              });

              // So not the way to do this.
              Form.getField(rgbForm, 'hex').each((hexField) => {
                AlloyTriggers.emit(hexField, NativeEvents.input());
              });
            });
          }
        }
      }),
      ComposingConfigs.self()
    ])
  };
};

export const renderTabPanel = <I>(spec: TabPanelFoo<I>, backstage: UiFactoryBackstage): SketchSpec => {
  const storedValue = Cell<TabData>({ });

  const updateDataWithForm = (form: AlloyComponent): void => {
    const formData = Representing.getValue(form);
    const validData = toValidValues(formData).getOr({ });
    const currentData = storedValue.get();
    const newData = Merger.deepMerge(currentData, validData);
    storedValue.set(newData);
  };

  const setDataOnForm = (form: AlloyComponent) => {
    const tabData = storedValue.get();
    Representing.setValue(form, tabData);
  };

  const oldTab = Cell(null);

  const allTabs = Arr.map(spec.tabs, function (tab) {
    return {
      value: tab.title,
      dom: {
        tag: 'div',
        classes: [ 'tox-dialog__body-nav-item' ],
        innerHtml: backstage.shared.providers.translate(tab.title)
      },
      view () {
        return [
          // Dupe with SilverDialog
          AlloyForm.sketch((parts) => {
            return {
              dom: {
                tag: 'div',
                classes: [ 'tox-form' ]
              },
              components: Arr.map(tab.items, (item) => interpretInForm(parts, item, backstage)),
              formBehaviours: Behaviour.derive([
                Keying.config({
                  mode: 'acyclic',
                  useTabstopAt: Fun.not(NavigableObject.isPseudoStop)
                }),

                AddEventsBehaviour.config('TabView.form.events', [
                  AlloyEvents.runOnAttached(setDataOnForm),
                  AlloyEvents.runOnDetached(updateDataWithForm)
                ]),
                Receiving.config({
                  channels: Objects.wrapAll([
                    {
                      key: SendDataToSectionChannel,
                      value:  {
                        onReceive: updateDataWithForm
                      }
                    },
                    {
                      key: SendDataToViewChannel,
                      value: {
                        onReceive: setDataOnForm
                      }
                    }
                  ])
                })
              ])
            };
          })
        ];
      }
    };
  });

  // Assign fixed height or variable height to the tabs
  const tabMode = setMode(allTabs).smartTabHeight;

  return AlloyTabSection.sketch({
    dom: {
      tag: 'div',
      classes: [ 'tox-dialog__body' ]
    },

    onChangeTab: (section, button, _viewItems) => {
      const title = Representing.getValue(button);
      AlloyTriggers.emitWith(section, formTabChangeEvent, {
        title,
        oldTitle: oldTab.get()
      });
      oldTab.set(title);
    },

    tabs: allTabs,

    components: [
      AlloyTabSection.parts().tabbar({
        dom: {
          tag: 'div',
          classes: [ 'tox-dialog__body-nav' ]
        },
        components: [
          AlloyTabbar.parts().tabs({ })
        ],
        markers: {
//.........这里部分代码省略.........

export const renderCollection = (spec: Types.Collection.Collection, providersBackstage: UiFactoryBackstageProviders): SketchSpec => {
  // DUPE with TextField.
  const pLabel = spec.label.map((label) => renderLabel(label, providersBackstage));

  const runOnItem = (f: (c: AlloyComponent, tgt: Element, itemValue: string) => void) => <T extends EventFormat>(comp: AlloyComponent, se: SimulatedEvent<T>) => {
    SelectorFind.closest(se.event().target(), '[data-collection-item-value]').each((target) => {
      f(comp, target, Attr.get(target, 'data-collection-item-value'));
    });
  };

  const escapeAttribute = (ch) => {
    if (ch === '"') { return '&quot;'; }
    return ch;
  };

  const setContents = (comp, items) => {
    const htmlLines = Arr.map(items, (item) => {
      const textContent = spec.columns === 1 ? `<div class="tox-collection__item-label">${item.text}</div>` : '';

      const iconContent = `<div class="tox-collection__item-icon">${item.icon}</div>`;

      // Replacing the hyphens and underscores in collection items with spaces
      // to ensure the screen readers pronounce the words correctly.
      // This is only for aria purposes. Emoticon and Special Character names will still use _ and - for autocompletion.
      const mapItemName = {
        '_': ' ',
        ' - ': ' ',
        '-': ' '
      };

      // Title attribute is added here to provide tooltips which might be helpful to sighted users.
      // Using aria-label here overrides the Apple description of emojis and special characters in Mac/ MS description in Windows.
      // But if only the title attribute is used instead, the names are read out twice. i.e., the description followed by the item.text.
      const ariaLabel = item.text.replace(/\_| \- |\-/g, (match) => {
        return mapItemName[match];
      });
      return `<div class="tox-collection__item" tabindex="-1" data-collection-item-value="${escapeAttribute(item.value)}" title="${ariaLabel}" aria-label="${ariaLabel}">${iconContent}${textContent}</div>`;
    });

    const chunks = spec.columns > 1 && spec.columns !== 'auto' ? Arr.chunk(htmlLines, spec.columns) : [ htmlLines ];
    const html = Arr.map(chunks, (ch) => {
      return `<div class="tox-collection__group">${ch.join('')}</div>`;
    });

    Html.set(comp.element(), html.join(''));
  };

  const collectionEvents = [
    AlloyEvents.run<SugarEvent>(NativeEvents.mouseover(), runOnItem((comp, tgt) => {
      Focus.focus(tgt);
    })),
    AlloyEvents.run<SugarEvent>(SystemEvents.tapOrClick(), runOnItem((comp, tgt, itemValue) => {
      AlloyTriggers.emitWith(comp, formActionEvent, {
        name: spec.name,
        value: itemValue
      });
    })),
    AlloyEvents.run(NativeEvents.focusin(), runOnItem((comp, tgt, itemValue) => {
      SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
        Class.remove(currentActive, ItemClasses.activeClass);
      });
      Class.add(tgt, ItemClasses.activeClass);
    })),
    AlloyEvents.run(NativeEvents.focusout(), runOnItem((comp, tgt, itemValue) => {
      SelectorFind.descendant(comp.element(), '.' + ItemClasses.activeClass).each((currentActive) => {
        Class.remove(currentActive, ItemClasses.activeClass);
      });
    })),
    AlloyEvents.runOnExecute(runOnItem((comp, tgt, itemValue) => {
      AlloyTriggers.emitWith(comp, formActionEvent, {
        name: spec.name,
        value: itemValue
      });
    }))
  ];

  const pField = AlloyFormField.parts().field({
    dom: {
      tag: 'div',
      // FIX: Read from columns
      classes: [ 'tox-collection' ].concat(spec.columns !== 1 ? [ 'tox-collection--grid' ] : [ 'tox-collection--list' ])
    },
    components: [ ],
    factory: { sketch: Fun.identity },
    behaviours: Behaviour.derive([
      Replacing.config({ }),
      Representing.config({
        store: {
          mode: 'memory',
          initialValue: [ ]
        },
        onSetValue: (comp, items) => {
          setContents(comp, items);
          if (spec.columns === 'auto') {
            detectSize(comp, 5, 'tox-collection__item').each(({ numRows, numColumns }) => {
              Keying.setGridSize(comp, numRows, numColumns);
            });
          }

          AlloyTriggers.emit(comp, formResizeEvent);
//.........这里部分代码省略.........

export const renderCheckbox = (spec: CheckboxFoo, providerBackstage: UiFactoryBackstageProviders): SimpleSpec => {
  const repBehaviour = Representing.config({
    store: {
      mode: 'manual',
      getValue: (comp: AlloyComponent): boolean => {
        const el = comp.element().dom() as HTMLInputElement;
        return el.checked;
      },
      setValue: (comp: AlloyComponent, value: boolean) => {
        const el = comp.element().dom() as HTMLInputElement;
        el.checked = value;
      }
    }
  });

  const toggleCheckboxHandler = (comp) => {
    comp.element().dom().click();
    return Option.some(true);
  };

  const pField = AlloyFormField.parts().field({
    factory: { sketch: Fun.identity },
    dom: {
      tag: 'input',
      classes: ['tox-checkbox__input'],
      attributes: {
        type: 'checkbox'
      }
    },

    behaviours: Behaviour.derive([
      ComposingConfigs.self(),
      Tabstopping.config({}),
      Focusing.config({ }),
      repBehaviour,
      Keying.config({
        mode: 'special',
        onEnter: toggleCheckboxHandler,
        onSpace: toggleCheckboxHandler,
        stopSpaceKeyup: true
      }),
      AddEventsBehaviour.config('checkbox-events', [
        AlloyEvents.run(NativeEvents.change(), (component, _) => {
          AlloyTriggers.emitWith(component, formChangeEvent, { name: spec.name } );
        })
      ])
    ]),
  });

  const pLabel = AlloyFormField.parts().label({
    dom: {
      tag: 'span',
      classes: ['tox-checkbox__label'],
      innerHtml: providerBackstage.translate(spec.label)
    },
    behaviours: Behaviour.derive([
      Unselecting.config({})
    ])
  });

  const makeIcon = (className: string) => {
    const iconName = className === 'checked' ? 'selected' : 'unselected';
    return {
      dom: {
        tag: 'span',
        classes: ['tox-icon', 'tox-checkbox-icon__' + className],
        innerHtml: Icons.get(iconName, providerBackstage.icons)
      }
    };
  };

  const memIcons = Memento.record(
    {
      dom: {
        tag: 'div',
        classes: ['tox-checkbox__icons']
      },
      components: [
        makeIcon('checked'),
        makeIcon('unchecked')
      ]
    }
  );

  return AlloyFormField.sketch({
    dom: {
      tag: 'label',
      classes: ['tox-checkbox'],
    },
    components: [
      pField,
      memIcons.asSpec(),
      pLabel
    ]
  });
};

//.........这里部分代码省略.........
    blobManipulate(anyInSystem, blob, filter, action, Fun.noop);
  };

  const manipulateApply = (anyInSystem: AlloyComponent, filter: (ir: ImageResult) => ImageResult | PromiseLike<ImageResult>, swap: () => void): void => {
    const blob = state.getBlobState().blob;
    const action = (blob) => {
      const url = state.addBlobState(blob);
      destroyTempState(anyInSystem);
      return url;
    };
    blobManipulate(anyInSystem, blob, filter, action, swap);
  };

  const apply = (anyInSystem: AlloyComponent, simulatedEvent: SimulatedEvent<CustomEvent>): void => {
    const postApply = () => {
      destroyTempState(anyInSystem);
      const swap = simulatedEvent.event().swap();
      swap();
    };
    state.applyTempState(postApply);
  };

  const destroyTempState = (anyInSystem: AlloyComponent): string => {
    const currentUrl = state.getBlobState().url;
    state.destroyTempState();
    updateButtonUndoStates(anyInSystem);
    return currentUrl;
  };

  const cancel = (anyInSystem: AlloyComponent): void => {
    const currentUrl = destroyTempState(anyInSystem);
    updateSrc(anyInSystem, currentUrl).then((oImg) => {
      unblock(anyInSystem);
    });
  };

  const back = (anyInSystem: AlloyComponent, simulatedEvent: SimulatedEvent<CustomEvent>): void => {
    cancel(anyInSystem);
    const swap = simulatedEvent.event().swap();
    swap();
    imagePanel.hideCrop();
  };

  const transform = (anyInSystem: AlloyComponent, simulatedEvent: SimulatedEvent<CustomEvent>): void => manipulate(anyInSystem, simulatedEvent.event().transform(), Fun.noop);
  const tempTransform = (anyInSystem: AlloyComponent, simulatedEvent: SimulatedEvent<CustomEvent>): void => tempManipulate(anyInSystem, simulatedEvent.event().transform());
  const transformApply = (anyInSystem: AlloyComponent, simulatedEvent: SimulatedEvent<CustomEvent>): void => manipulateApply(anyInSystem, simulatedEvent.event().transform(), simulatedEvent.event().swap());

  const imagePanel = ImagePanel.renderImagePanel(detail.currentState.url);
  const sideBar = SideBar.renderSideBar(providersBackstage);
  const editPanel = EditPanel.renderEditPanel(imagePanel, providersBackstage);

  const swap = (anyInSystem: AlloyComponent, simulatedEvent: SimulatedEvent<CustomEvent>): void => {
    disableUndoRedo(anyInSystem);
    const transform = simulatedEvent.event().transform();
    const swap = simulatedEvent.event().swap();
    transform.fold(() => {
      swap();
    }, (transform) => {
      manipulate(anyInSystem, transform, swap);
    });
  };

  return {
    dom: {
      tag: 'div',
      attributes: {
        role: 'presentation'
      }
    },
    components: [
      editPanel.memContainer.asSpec(),
      imagePanel.memContainer.asSpec(),
      sideBar.container
    ],
    behaviours: Behaviour.derive([
      Representing.config({
        store: {
          mode: 'manual',
          getValue: () => {
            return state.getBlobState();
          }
        }
      }),
      AddEventsBehaviour.config('image-tools-events', [
        AlloyEvents.run(ImageToolsEvents.internal.undo(), undo),
        AlloyEvents.run(ImageToolsEvents.internal.redo(), redo),
        AlloyEvents.run(ImageToolsEvents.internal.zoom(), zoom),

        AlloyEvents.run(ImageToolsEvents.internal.back(), back),
        AlloyEvents.run(ImageToolsEvents.internal.apply(), apply),

        AlloyEvents.run(ImageToolsEvents.internal.transform(), transform),
        AlloyEvents.run(ImageToolsEvents.internal.tempTransform(), tempTransform),
        AlloyEvents.run(ImageToolsEvents.internal.transformApply(), transformApply),
        AlloyEvents.run(ImageToolsEvents.internal.swap(), swap)
      ]),
      ComposingConfigs.self()
    ])
  };
};