TypeScript bobril.withKey函数代码示例

function getSliderPreview(): b.IBobrilChildren {
    return m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
        b.withKey(m.Slider({ value: slider1 }), 's1'),
        b.withKey(m.Slider({ value: slider1, disabled: true }), 's2'),
        b.withKey(m.Slider({ value: slider2, min: 5, max: 15, step: 1 }), 's3'),
        b.withKey(m.Slider({ value: slider2, min: 5, max: 15, step: 1, disabled: true }), 's4'),
    ]);
}

function getCheckboxPreview(): b.IBobrilChildren {
    return m.Paper({ style: { margin: 16, padding: 8 } }, [
        b.withKey(m.Checkbox({ checked: ch1, action: () => { ch1 = !ch1; b.invalidate(); } }, 'Two state Checkbox'), 'ch1'),
        b.withKey(m.Checkbox({ checked: ch1, disabled: true }, 'Disabled two state'), 'ch2'),
        m.Divider(),
        b.withKey(m.Checkbox({ checked: ch3 == 1, indeterminate: ch3 == 2, action: () => { ch3 = (ch3 + 1) % 3; b.invalidate(); } }, 'Three state Checkbox'), 'ch3'),
        b.withKey(m.Checkbox({ checked: ch3 == 1, indeterminate: ch3 == 2, disabled: true }, 'Disabled three state'), 'ch4')
    ]);
}

function getRadioButtonPreview(): b.IBobrilChildren {
    return m.Paper({ style: { margin: 16, padding: 8 } }, [
        m.RadioButtonGroup({ value: rb1, unselectedValue: -1 }, [
            b.withKey(m.RadioButton({ value: 0 }, 'Option A'), 'rb1'),
            b.withKey(m.RadioButton({ value: 1 }, 'Option B'), 'rb2'),
            b.withKey(m.RadioButton({ value: 2 }, 'Option C'), 'rb3'),
            b.withKey(m.RadioButton({ value: 3, disabled: true }, 'Disabled Option'), 'rb4')
        ])
    ]);
}

function getTextFieldPreview(): b.IBobrilChildren {
    return m.Paper({ zDepth: 0, style: { margin: 16, padding: 8 } }, [
        b.withKey(m.TextField({ value: str1, labelText: 'First Name' }), 'tf1'),
        b.withKey(m.TextField({ value: str2, labelText: 'Last Name', errorText: str2() == '' ? 'This field is required' : null }), 'tf2'),
        b.withKey(m.TextField({ value: str5, labelText: 'Password', inputType: 'password' }), 'tf3'),
        b.withKey(m.TextField({ value: str3, hintText: 'Hint text and no label' }), 'tf4'),
        b.withKey(m.TextField({ value: str3, labelText: 'Disabled with label', disabled: true }), 'tf5'),
        b.withKey(m.TextField({ value: str4, rows: 2, rowsMax: 4, hintText: 'Multiline 2-4 rows, Hint text and no label' }), 'tf6'),
        b.withKey(m.TextField({ value: str4, rows: 2, rowsMax: 4, labelText: 'Multiline 2-4 rows, Disabled with label', disabled: true }), 'tf7')
    ]);
}

             }
         }
         b.invalidate(ctx);
     }
 } else {
     if (focusFromKeyboard) showFocus = true;
 }
 if (showFocus) {
     rr = 12;
     ro = 0.2;
 }
 b.style(me, disabled ? disabledStyle : enabledStyle);
 let checkDiv: b.IBobrilNode = d.children != null ? { tag: "div" } : me;
 b.style(checkDiv, rootSwitchStyle);
 checkDiv.children = [
     rr != 0 && b.withKey(b.styledDiv("", showFocus ? focusFromKeyStyle : rippleStyle, { left: 12 - rr, top: 12 - rr, width: 2 * rr, height: 2 * rr, opacity: ro, background: checked ? styles.primary1Color : styles.checkboxOffColor }), "r"),
     b.styledDiv(ics.off({ color: "inherit" }), disabled ? ((checked || indeterminate) ? hiddenStyle : checkDisabled) : (checked ? boxWhenSwitchedStyle : boxStyle)),
     indeterminate != null && b.withKey(b.styledDiv(ics.indeterminate({ color: "inherit" }), disabled ? (indeterminate ? checkDisabled : hiddenStyle) : (indeterminate ? checkWhenSwitchedStyle : checkStyle)), "i"),
     b.styledDiv(ics.on({ color: "inherit" }), disabled ? (checked ? checkDisabled : hiddenStyle) : (checked ? checkWhenSwitchedStyle : checkStyle))
 ];
 if (checkDiv !== me) {
     me.children = [checkDiv, b.styledDiv(d.children, textStyle, disabled && disabledTextStyle)];
     b.style(me, wrapStyle);
 }
 me.attrs = {
     role: ctx.radio ? "radio" : "checkbox",
     "aria-checked": indeterminate ? "mixed" : checked ? "true" : "false",
     "aria-disabled": disabled ? "true" : "false"
 };
 if (!(disabled || ctx.radio && d.tabindex == null))
     me.attrs.tabindex = d.tabindex || 0;

        if (leftIconElement)
            leftIconElement = b.styledDiv(leftIconElement,
                leftIconDesktopStyle, { marginTop: d.desktop ? -8 : -4 });

        let rightIconElement: b.IBobrilNode | undefined;
        if (d.rightIcon)
            rightIconElement = b.styledDiv(d.rightIcon, { color: d.disabled ? styles.strDisabledColor : styles.strTextColor },
                rightIconDesktopStyle, { marginTop: d.desktop ? -8 : -4 });

        let secondaryTextElement;
        if (d.secondaryText) secondaryTextElement = b.styledDiv(d.secondaryText, secondaryTextStyle);

        let childMenuPopover;
        if (d.menuItems && ctx.open) {
            childMenuPopover = [b.withKey(ClickAwayListener({
                onClick: () => handleRequestClose(ctx)
            }), "c"),
            Popover({
                autoCloseWhenOffScreen: true,
                animation: d.animation,
                anchorOrigin: d.anchorOrigin || { horizontal: 'right', vertical: 'top' },
                anchorNode: ctx.me,
                open: ctx.open,
                targetOrigin: d.targetOrigin || { horizontal: 'left', vertical: 'top' },
                onRequestClose: () => handleRequestClose(ctx)
            },
                Menu({
                    desktop: d.desktop,
                    style: nestedMenuStyle
                }, d.menuItems),
            )];