TypeScript Composing.config方法代码示例

const field = function (name, placeholder) {
  const inputSpec = Memento.record(Input.sketch({
    placeholder,
    onSetValue (input, data) {
      // If the value changes, inform the container so that it can update whether the "x" is visible
      AlloyTriggers.emit(input, NativeEvents.input());
    },
    inputBehaviours: Behaviour.derive([
      Composing.config({
        find: Option.some
      }),
      Tabstopping.config({ }),
      Keying.config({
        mode: 'execution'
      })
    ]),
    selectOnFocus: false
  }));

  const buttonSpec = Memento.record(
    Button.sketch({
      dom: UiDomFactory.dom('<button class="${prefix}-input-container-x ${prefix}-icon-cancel-circle ${prefix}-icon"></button>'),
      action (button) {
        const input = inputSpec.get(button);
        Representing.setValue(input, '');
      }
    })
  );

  return {
    name,
    spec: Container.sketch({
      dom: UiDomFactory.dom('<div class="${prefix}-input-container"></div>'),
      components: [
        inputSpec.asSpec(),
        buttonSpec.asSpec()
      ],
      containerBehaviours: Behaviour.derive([
        Toggling.config({
          toggleClass: Styles.resolve('input-container-empty')
        }),
        Composing.config({
          find (comp) {
            return Option.some(inputSpec.get(comp));
          }
        }),
        AddEventsBehaviour.config(clearInputBehaviour, [
          // INVESTIGATE: Because this only happens on input,
          // it won't reset unless it has an initial value
          AlloyEvents.run(NativeEvents.input(), function (iContainer) {
            const input = inputSpec.get(iContainer);
            const val = Representing.getValue(input);
            const f = val.length > 0 ? Toggling.off : Toggling.on;
            f(iContainer);
          })
        ])
      ])
    })
  };
};

const childAt = (index: number) => {
  return Composing.config({
    find: (comp: AlloyComponent) => {
      return Traverse.child(comp.element(), index).bind((element) => {
        return comp.getSystem().getByDom(element).toOption();
      });
    }
  });
};

const renderSidebar = (spec) => {
  return {
    uid: spec.uid,
    dom: {
      tag: 'div',
      classes: ['tox-sidebar'],
      attributes: {
        role: 'complementary'
      }
    },
    components: [
      {
        dom: {
          tag: 'div',
          classes: ['tox-sidebar__slider']
        },
        components: [
          // this will be replaced on setSidebar
        ],
        behaviours: Behaviour.derive([
          Tabstopping.config({ }),
          Focusing.config({ }), // TODO use Keying and use focusIn, but need to handle if sidebar contains nothing
          Sliding.config({
            dimension: {
              property: 'width'
            },
            closedClass: 'tox-sidebar--sliding-closed',
            openClass: 'tox-sidebar--sliding-open',
            shrinkingClass: 'tox-sidebar--sliding-shrinking',
            growingClass: 'tox-sidebar--sliding-growing',
            onShrunk: (slider: AlloyComponent) => {
              const optSlotContainer = Composing.getCurrent(slider);
              optSlotContainer.each(SlotContainer.hideAllSlots);
              AlloyTriggers.emit(slider, autoSize);
            },
            onGrown: (slider: AlloyComponent) => {
              AlloyTriggers.emit(slider, autoSize);
            },
            onStartGrow: (slider: AlloyComponent) => {
              AlloyTriggers.emitWith(slider, fixSize, { width: Css.getRaw(slider.element(), 'width').getOr('') });
            },
            onStartShrink: (slider: AlloyComponent) => {
              AlloyTriggers.emitWith(slider, fixSize, { width: Width.get(slider.element()) + 'px' });
            }
          }),
          Replacing.config({}),
          Composing.config({
            find: (comp: AlloyComponent) => {
              const children = Replacing.contents(comp);
              return Arr.head(children);
            }
          })
        ])
      }
    ],
    behaviours: Behaviour.derive([
      ComposingConfigs.childAt(0),
      AddEventsBehaviour.config('sidebar-sliding-events', [
        AlloyEvents.run<FixSizeEvent>(fixSize, (comp, se) => {
          Css.set(comp.element(), 'width', se.event().width());
        }),
        AlloyEvents.run(autoSize, (comp, se) => {
          Css.remove(comp.element(), 'width');
        })
      ])
    ])
  };
};

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: {
//.........这里部分代码省略.........