Web: added support theme as props

2022-01-25 15:56:51 +08:00 · 2022-01-25 15:56:51 +08:00 · a53ed1a7c5
commit a53ed1a7c5
parent f98812e233
10 changed files with 85 additions and 15 deletions
--- a/packages/asc-web-components/combobox/index.js
+++ b/packages/asc-web-components/combobox/index.js
@ -115,6 +115,7 @@ class ComboBox extends React.Component {

    return (
      <StyledComboBox
+        theme={theme}
        ref={this.ref}
        isDisabled={isDisabled}
        scaled={scaled}
--- a/packages/asc-web-components/combobox/sub-components/combo-button.js
+++ b/packages/asc-web-components/combobox/sub-components/combo-button.js
@ -33,6 +33,7 @@ class ComboButton extends React.Component {
      scaled,
      size,
      comboIcon,
+      theme,
    } = this.props;

    const defaultOption = selectedOption.default;
@ -40,6 +41,7 @@ class ComboButton extends React.Component {

    return (
      <StyledComboButton
+        theme={theme}
        isOpen={isOpen}
        isDisabled={isDisabled}
        noBorder={noBorder}
@ -53,6 +55,7 @@ class ComboButton extends React.Component {
      >
        {innerContainer && (
          <StyledOptionalItem
+            theme={theme}
            className={innerContainerClassName}
            isDisabled={isDisabled}
            defaultOption={defaultOption}
@ -62,6 +65,7 @@ class ComboButton extends React.Component {
        )}
        {selectedOption && selectedOption.icon && (
          <StyledIcon
+            theme={theme}
            className="forceColor"
            isDisabled={isDisabled}
            defaultOption={defaultOption}
@ -74,6 +78,7 @@ class ComboButton extends React.Component {
          </StyledIcon>
        )}
        <Text
+          theme={theme}
          noBorder={noBorder}
          title={selectedOption.label}
          as="div"
@ -84,6 +89,7 @@ class ComboButton extends React.Component {
          {selectedOption.label}
        </Text>
        <StyledArrowIcon
+          theme={theme}
          needDisplay={withOptions || withAdvancedOptions}
          noBorder={noBorder}
          isOpen={isOpen}
@ -97,6 +103,7 @@ class ComboButton extends React.Component {
              />
            ) : (
              <StyledExpanderDownIcon
+                theme={theme}
                size="scale"
                className="combo-buttons_expander-icon"
              />
--- a/packages/asc-web-components/drop-down/index.js
+++ b/packages/asc-web-components/drop-down/index.js
@ -11,7 +11,8 @@ import StyledDropdown from "./styled-drop-down";

 // eslint-disable-next-line react/display-name, react/prop-types
 const Row = memo(({ data, index, style }) => {
-  const option = data[index];
+  const option = data.children[index];
+
  // eslint-disable-next-line react/prop-types
  const separator = option.props.isSeparator
    ? { width: `calc(100% - 32px)`, height: `1px` }
@ -20,6 +21,7 @@ const Row = memo(({ data, index, style }) => {

  return (
    <DropDownItem
+      theme={data.theme}
      // eslint-disable-next-line react/prop-types
      {...option.props}
      style={newStyle}
@ -157,7 +159,7 @@ class DropDown extends React.PureComponent {
            width={width}
            itemSize={getItemSize}
            itemCount={children.length}
-            itemData={children}
+            itemData={{ children: children, theme: theme }}
            outerElementType={CustomScrollbarsVirtualList}
          >
            {Row}
@ -179,15 +181,21 @@ class DropDownContainer extends React.Component {
    this.props.clickOutsideAction({}, !this.props.open);
  };
  render() {
-    const { withBackdrop = true, open } = this.props;
+    const { withBackdrop = true, open, theme } = this.props;
    const eventTypesProp = isMobile ? { eventTypes: ["touchend"] } : {};

    return (
      <>
        {withBackdrop ? (
-          <Backdrop visible={open} zIndex={199} onClick={this.toggleDropDown} />
+          <Backdrop
+            theme={theme}
+            visible={open}
+            zIndex={199}
+            onClick={this.toggleDropDown}
+          />
        ) : null}
        <EnhancedComponent
+          theme={theme}
          {...eventTypesProp}
          disableOnClickOutside={true}
          {...this.props}
--- a/packages/asc-web-components/input-block/index.js
+++ b/packages/asc-web-components/input-block/index.js
@ -56,6 +56,7 @@ class InputBlock extends React.Component {
      isIconFill,
      onIconClick,
      iconSize,
+      theme,
    } = this.props;

    if (typeof iconSize == "number" && iconSize > 0) {
@ -79,6 +80,7 @@ class InputBlock extends React.Component {

    return (
      <StyledInputGroup
+        theme={theme}
        hasError={hasError}
        hasWarning={hasWarning}
        isDisabled={isDisabled}
@ -89,11 +91,12 @@ class InputBlock extends React.Component {
        color={iconColor}
      >
        <div className="prepend">
-          <StyledChildrenBlock className="prepend-children">
+          <StyledChildrenBlock theme={theme} className="prepend-children">
            {children}
          </StyledChildrenBlock>
        </div>
        <TextInput
+          theme={theme}
          id={id}
          name={name}
          type={type}
@ -121,12 +124,14 @@ class InputBlock extends React.Component {
          //iconNames.includes(iconName) && (
          <div className="append">
            <StyledIconBlock
+              theme={theme}
              className="input-block-icon"
              isDisabled={isDisabled}
              onClick={this.onIconClick}
              isClickable={typeof onIconClick === "function"}
            >
              <IconButton
+                theme={theme}
                size={iconButtonSize}
                iconName={iconName}
                isFill={isIconFill}
--- a/packages/asc-web-components/link-with-dropdown/index.js
+++ b/packages/asc-web-components/link-with-dropdown/index.js
@ -72,19 +72,28 @@ class LinkWithDropdown extends React.Component {
      id,
      style,
      isDisabled,
+      theme,
      ...rest
    } = this.props;

    return (
-      <StyledSpan className={className} id={id} style={style} ref={this.ref}>
+      <StyledSpan
+        theme={theme}
+        className={className}
+        id={id}
+        style={style}
+        ref={this.ref}
+      >
        <span onClick={this.onOpen}>
          <StyledLinkWithDropdown
+            theme={theme}
            isSemitransparent={isSemitransparent}
            dropdownType={dropdownType}
            color={color}
            isDisabled={isDisabled}
          >
            <StyledText
+              theme={theme}
              isTextOverflow={isTextOverflow}
              truncate={isTextOverflow}
              fontSize={fontSize}
@ -98,6 +107,7 @@ class LinkWithDropdown extends React.Component {
              {this.props.children}
            </StyledText>
            <Caret
+              theme={theme}
              color={color}
              dropdownType={dropdownType}
              isOpen={this.state.isOpen}
@ -106,6 +116,7 @@ class LinkWithDropdown extends React.Component {
          </StyledLinkWithDropdown>
        </span>
        <DropDown
+          theme={theme}
          className="fixed-max-width"
          open={this.state.isOpen}
          withArrow={false}
@ -114,6 +125,7 @@ class LinkWithDropdown extends React.Component {
        >
          {data.map((item) => (
            <DropDownItem
+              theme={theme}
              className="drop-down-item"
              key={item.key}
              {...item}
--- a/packages/asc-web-components/text-input/input.js
+++ b/packages/asc-web-components/text-input/input.js
@ -15,6 +15,7 @@ const Input = ({
  isBold,
  forwardedRef,
  className,
+  theme,
  ...props
 }) => {
  const rest = {};
@ -25,12 +26,18 @@ const Input = ({

  return props.mask != null ? (
    <MaskedInput
+      theme={theme}
      className={`${className} not-selectable`}
      keepCharPositions
      {...props}
    />
  ) : (
-    <input className={`${className} not-selectable`} {...props} {...rest} />
+    <input
+      theme={theme}
+      className={`${className} not-selectable`}
+      {...props}
+      {...rest}
+    />
  );
 };
 export default Input;
--- a/packages/asc-web-components/toggle-button/index.js
+++ b/packages/asc-web-components/toggle-button/index.js
@ -66,6 +66,7 @@ class ToggleButton extends Component {
      className,
      style,
      isLoading,
+      theme,
    } = this.props;
    const { gray } = globalColors;
    const colorProps = isDisabled ? { color: gray } : {};
@ -74,6 +75,7 @@ class ToggleButton extends Component {

    return (
      <ToggleButtonContainer
+        theme={theme}
        id={id}
        className={className}
        style={style}
@ -81,14 +83,24 @@ class ToggleButton extends Component {
        isChecked={this.state.checked}
      >
        <HiddenInput
+          theme={theme}
          type="checkbox"
          checked={this.state.checked}
          disabled={isDisabled}
          onChange={onChange}
        />
-        <ToggleIcon isChecked={this.state.checked} isLoading={isLoading} />
+        <ToggleIcon
+          theme={theme}
+          isChecked={this.state.checked}
+          isLoading={isLoading}
+        />
        {label && (
-          <Text className="toggle-button-text" as="span" {...colorProps}>
+          <Text
+            theme={theme}
+            className="toggle-button-text"
+            as="span"
+            {...colorProps}
+          >
            {label}
          </Text>
        )}
--- a/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js
+++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/SharingRow.js
@ -174,7 +174,12 @@ class SharingRow extends React.Component {
        {!isPersonal && (
          <>
            {internalLinkVisible && (
-              <LinkRow linkText={t('InternalLink')} options={internalLinkData} {...this.props} />
+              <LinkRow
+                theme={theme}
+                linkText={t('InternalLink')}
+                options={internalLinkData}
+                {...this.props}
+              />
            )}

            {!shareLink && (
--- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
@ -578,9 +578,14 @@ class SharingPanelComponent extends React.Component {
                      open={showActionPanel}
                      manualY="30px"
                      clickOutsideAction={this.onCloseActionPanel}>
-                      <DropDownItem label={t('LinkText')} onClick={this.onShowUsersPanel} />
+                      <DropDownItem
+                        theme={theme}
+                        label={t('LinkText')}
+                        onClick={this.onShowUsersPanel}
+                      />
                      {!isEncrypted && (
                        <DropDownItem
+                          theme={theme}
                          label={t('AddGroupsForSharingButton')}
                          onClick={this.onShowGroupsPanel}
                        />
@ -645,7 +650,7 @@ class SharingPanelComponent extends React.Component {
                </div>
              )}
            </StyledSharingBody>
-            <StyledFooter>
+            <StyledFooter theme={theme}>
              {!isPersonal && (
                <Checkbox
                  theme={theme}
--- a/products/ASC.People/Client/src/components/PeopleSelector/sub-components/UserTooltip.js
+++ b/products/ASC.People/Client/src/components/PeopleSelector/sub-components/UserTooltip.js
@ -5,9 +5,10 @@ import Text from '@appserver/components/text';
 import StyledUserTooltip from './StyledUserTooltip';

 const UserTooltip = ({ avatarUrl, label, email, position, theme }) => (
-  <StyledUserTooltip>
+  <StyledUserTooltip theme={theme}>
    <div className="block-avatar">
      <Avatar
+        theme={theme}
        className="user-avatar"
        size="min"
        role="user"
@ -18,10 +19,17 @@ const UserTooltip = ({ avatarUrl, label, email, position, theme }) => (
    </div>

    <div className="block-info">
-      <Text isBold={true} fontSize="13px" fontWeight={600} truncate={true} title={label}>
+      <Text
+        theme={theme}
+        isBold={true}
+        fontSize="13px"
+        fontWeight={600}
+        truncate={true}
+        title={label}>
        {label}
      </Text>
      <Text
+        theme={theme}
        color={theme.peopleSelector.textColor}
        fontSize="13px"
        className="email-text"
@ -29,7 +37,7 @@ const UserTooltip = ({ avatarUrl, label, email, position, theme }) => (
        title={email}>
        {email}
      </Text>
-      <Text fontSize="13px" fontWeight={600} truncate={true} title={position}>
+      <Text theme={theme} fontSize="13px" fontWeight={600} truncate={true} title={position}>
        {position}
      </Text>
    </div>