Function Properties

packages/dev/s2-docs/pages/s2/home/ExampleApp2.tsx:441–587

()

}

function Properties() {
  let {brightness, contrast, saturation, onChange} = useContext(FilterContext);
  let isHCM = 'style' in useContext(HCMContext);
  return (
    <div
      role="group"
      aria-label="Properties"
      className={style({display: 'flex', flexDirection: 'column', gap: 8, padding: 8})}>
      <Accordion
        density="compact"
        isQuiet
        allowsMultipleExpanded
        defaultExpandedKeys={['filters', 'text']}>
        <Disclosure id="filters">
          <DisclosureTitle>Filters</DisclosureTitle>
          <DisclosurePanel>
            <Form labelPosition="side" size="S" UNSAFE_style={{gap: 8}}>
              <Slider
                label="Brightness"
                minValue={-100}
                maxValue={100}
                fillOffset={0}
                formatOptions={{signDisplay: 'exceptZero'}}
                defaultValue={brightness}
                onChange={brightness => onChange({brightness, contrast, saturation})}
              />
              <Slider
                label="Contrast"
                minValue={-100}
                maxValue={100}
                fillOffset={0}
                formatOptions={{signDisplay: 'exceptZero'}}
                defaultValue={contrast}
                onChange={contrast => onChange({brightness, contrast, saturation})}
              />
              <Slider
                label="Saturation"
                minValue={-100}
                maxValue={100}
                fillOffset={0}
                formatOptions={{signDisplay: 'exceptZero'}}
                defaultValue={saturation}
                onChange={saturation => onChange({brightness, contrast, saturation})}
              />
            </Form>
          </DisclosurePanel>
        </Disclosure>
        <Disclosure id="text">
          <DisclosureTitle>Text</DisclosureTitle>
          <DisclosurePanel>
            <Form size="S" UNSAFE_style={{gap: 8}}>
              <div
                className={style({
                  display: 'flex',
                  gap: 8,
                  alignItems: 'center',
                  gridColumnStart: 'span 2'
                })}>