pixel-react 1.5.2 → 1.5.4

package/src/components/StateDropdown/StateDropdown.tsx

@@ -1,230 +1,230 @@
-import Select from './../Select/Select';
-import { StateDropdownProps } from './StateDropdownTypes';
-
-const StateDropdown = ({
-  value,
-  nodeObj,
-  isReviewer = false,
-  isApprovePage = false,
-  handleStateValueClick,
-  handleDropdownOptionsClick,
-  disabled = false,
-  isOnlyReviewer = false,
-  userHasOnlyViewAccess = false,
-}: StateDropdownProps) => {
-  let currentState = value.toUpperCase();
-  let content;
-  let options;
-  const isReviewerAndClickedOnReviewState: boolean =
-    isReviewer && !isApprovePage && currentState === 'REVIEW' && !nodeObj;
-  let selectedOption: { label: string; value: string } = {
-    label: '',
-    value: '',
-  };
-
-  if (isOnlyReviewer && !isApprovePage) {
-    options = [
-      {
-        label: 'New',
-        value: 'New',
-      },
-      {
-        label: 'Approve',
-        value: 'Approve',
-      },
-    ];
-  } else if (!isReviewer && !isApprovePage) {
-    options = [
-      {
-        label: currentState === 'REJECTED' ? 'Rejected' : 'New',
-        value: currentState === 'REJECTED' ? 'Rejected' : 'New',
-      },
-      {
-        label: 'Approve',
-        value: 'Approve',
-      },
-    ];
-  } else if (isReviewerAndClickedOnReviewState) {
-    options = [
-      {
-        label: 'Review',
-        value: 'Review',
-      },
-      {
-        label: 'Approve',
-        value: 'Approve',
-      },
-    ];
-  } else if (isReviewer && !isApprovePage) {
-    options = [
-      {
-        label: currentState === 'REJECTED' ? 'Rejected' : 'New',
-        value: currentState === 'REJECTED' ? 'Rejected' : 'New',
-      },
-      {
-        label: 'Review',
-        value: 'Review',
-      },
-      {
-        label: 'Approve',
-        value: 'Approve',
-      },
-    ];
-  } else if (isReviewer && isApprovePage) {
-    options = [
-      {
-        label: 'Review',
-        value: 'Review',
-      },
-      {
-        label: 'Approve',
-        value: 'Approve',
-      },
-      {
-        label: 'Reject',
-        value: 'Reject',
-      },
-    ];
-  } else {
-    options = [
-      {
-        label: 'New',
-        value: 'New',
-      },
-      {
-        label: 'Review',
-        value: 'Review',
-      },
-    ];
-  }
-
-  let handleSelectedOption: (value: string) => {
-    label: string;
-    value: string;
-  } = (value) => {
-    return { label: value, value: value };
-  };
-  if (currentState === 'REVIEW') {
-    selectedOption = handleSelectedOption(value);
-  } else if (currentState === 'NEW' && !isApprovePage) {
-    selectedOption = handleSelectedOption(value);
-  } else if (currentState === 'REJECTED' && !isApprovePage) {
-    selectedOption = handleSelectedOption(value);
-  } else {
-    selectedOption = handleSelectedOption(value);
-  }
-
-  if (
-    ((currentState === 'NEW' && !isApprovePage) ||
-      (isApprovePage && currentState === 'REVIEW') ||
-      isReviewerAndClickedOnReviewState ||
-      (currentState === 'REJECTED' && !isApprovePage)) &&
-    !userHasOnlyViewAccess
-  ) {
-    content = !disabled ? (
-      <Select
-        label={value}
-        disabled={disabled}
-        onChange={handleDropdownOptionsClick}
-        optionsList={options}
-        selectedOption={selectedOption}
-        showLabel={false}
-        showBorder={false}
-        disableInput={true}
-        height={24}
-      />
-    ) : (
-      <Select
-        label={value}
-        disabled={true}
-        onChange={handleDropdownOptionsClick}
-        optionsList={options}
-        selectedOption={selectedOption}
-        showLabel={false}
-        showBorder={false}
-        disableInput={true}
-        height={24}
-      />
-    );
-  } else if (
-    currentState === 'REVIEW' &&
-    (!isApprovePage || userHasOnlyViewAccess)
-  ) {
-    content = (
-      <Select
-        label={value}
-        disabled={true}
-        onChange={handleDropdownOptionsClick}
-        optionsList={options}
-        selectedOption={selectedOption}
-        showLabel={false}
-        showBorder={false}
-        disableInput={true}
-        height={24}
-      />
-    );
-  } else if (currentState === 'APPROVED') {
-    content = (
-      <Select
-        label={value}
-        disabled={true}
-        onChange={handleDropdownOptionsClick}
-        optionsList={options}
-        selectedOption={selectedOption}
-        showLabel={false}
-        showBorder={false}
-        disableInput={true}
-        height={24}
-      />
-    );
-  } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
-    content = (
-      <Select
-        label={value}
-        disabled={true}
-        onChange={handleDropdownOptionsClick}
-        optionsList={options}
-        selectedOption={selectedOption}
-        showLabel={false}
-        showBorder={false}
-        disableInput={true}
-        height={24}
-      />
-    );
-  } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
-    content = (
-      <Select
-        label={value}
-        disabled={true}
-        onChange={handleDropdownOptionsClick}
-        optionsList={options}
-        selectedOption={selectedOption}
-        showLabel={false}
-        showBorder={false}
-        disableInput={true}
-        height={24}
-      />
-    );
-  } else {
-    content = '';
-  }
-
-  return (
-    <div
-      onClick={() => {
-        if (
-          value.toLowerCase() === 'review' &&
-          !userHasOnlyViewAccess &&
-          !isApprovePage &&
-          !isReviewer
-        ) {
-          handleStateValueClick();
-        }
-      }}
-    >
-      {content}
-    </div>
-  );
-};
-
-export default StateDropdown;
+import Select from './../Select/Select';
+import { StateDropdownProps } from './StateDropdownTypes';
+
+const StateDropdown = ({
+  value,
+  nodeObj,
+  isReviewer = false,
+  isApprovePage = false,
+  handleStateValueClick,
+  handleDropdownOptionsClick,
+  disabled = false,
+  isOnlyReviewer = false,
+  userHasOnlyViewAccess = false,
+}: StateDropdownProps) => {
+  let currentState = value.toUpperCase();
+  let content;
+  let options;
+  const isReviewerAndClickedOnReviewState: boolean =
+    isReviewer && !isApprovePage && currentState === 'REVIEW' && !nodeObj;
+  let selectedOption: { label: string; value: string } = {
+    label: '',
+    value: '',
+  };
+
+  if (isOnlyReviewer && !isApprovePage) {
+    options = [
+      {
+        label: 'New',
+        value: 'New',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (!isReviewer && !isApprovePage) {
+    options = [
+      {
+        label: currentState === 'REJECTED' ? 'Rejected' : 'New',
+        value: currentState === 'REJECTED' ? 'Rejected' : 'New',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (isReviewerAndClickedOnReviewState) {
+    options = [
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (isReviewer && !isApprovePage) {
+    options = [
+      {
+        label: currentState === 'REJECTED' ? 'Rejected' : 'New',
+        value: currentState === 'REJECTED' ? 'Rejected' : 'New',
+      },
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+    ];
+  } else if (isReviewer && isApprovePage) {
+    options = [
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+      {
+        label: 'Approve',
+        value: 'Approve',
+      },
+      {
+        label: 'Reject',
+        value: 'Reject',
+      },
+    ];
+  } else {
+    options = [
+      {
+        label: 'New',
+        value: 'New',
+      },
+      {
+        label: 'Review',
+        value: 'Review',
+      },
+    ];
+  }
+
+  let handleSelectedOption: (value: string) => {
+    label: string;
+    value: string;
+  } = (value) => {
+    return { label: value, value: value };
+  };
+  if (currentState === 'REVIEW') {
+    selectedOption = handleSelectedOption(value);
+  } else if (currentState === 'NEW' && !isApprovePage) {
+    selectedOption = handleSelectedOption(value);
+  } else if (currentState === 'REJECTED' && !isApprovePage) {
+    selectedOption = handleSelectedOption(value);
+  } else {
+    selectedOption = handleSelectedOption(value);
+  }
+
+  if (
+    ((currentState === 'NEW' && !isApprovePage) ||
+      (isApprovePage && currentState === 'REVIEW') ||
+      isReviewerAndClickedOnReviewState ||
+      (currentState === 'REJECTED' && !isApprovePage)) &&
+    !userHasOnlyViewAccess
+  ) {
+    content = !disabled ? (
+      <Select
+        label={value}
+        disabled={disabled}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={false}
+        disableInput={true}
+        height={24}
+      />
+    ) : (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={false}
+        disableInput={true}
+        height={24}
+      />
+    );
+  } else if (
+    currentState === 'REVIEW' &&
+    (!isApprovePage || userHasOnlyViewAccess)
+  ) {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={false}
+        disableInput={true}
+        height={24}
+      />
+    );
+  } else if (currentState === 'APPROVED') {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={false}
+        disableInput={true}
+        height={24}
+      />
+    );
+  } else if (currentState === 'REJECTED' && userHasOnlyViewAccess) {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={false}
+        disableInput={true}
+        height={24}
+      />
+    );
+  } else if (currentState === 'NEW' && userHasOnlyViewAccess) {
+    content = (
+      <Select
+        label={value}
+        disabled={true}
+        onChange={handleDropdownOptionsClick}
+        optionsList={options}
+        selectedOption={selectedOption}
+        showLabel={false}
+        showBorder={false}
+        disableInput={true}
+        height={24}
+      />
+    );
+  } else {
+    content = '';
+  }
+
+  return (
+    <div
+      onClick={() => {
+        if (
+          value.toLowerCase() === 'review' &&
+          !userHasOnlyViewAccess &&
+          !isApprovePage &&
+          !isReviewer
+        ) {
+          handleStateValueClick();
+        }
+      }}
+    >
+      {content}
+    </div>
+  );
+};
+
+export default StateDropdown;

package/src/components/StateDropdown/StateDropdownTypes.tsx

@@ -1,21 +1,21 @@
-export interface StateDropdownProps{
-
-    value:string;
-
-    nodeObj:{};
-
-    isReviewer:boolean;
-
-    isApprovePage:boolean;
-
-    handleDropdownOptionsClick:()=>void;
-
-    disabled:boolean;
-
-    isOnlyReviewer:boolean;
-
-    userHasOnlyViewAccess:boolean;
-
-    handleStateValueClick:()=>void;
-}
-
+export interface StateDropdownProps{
+
+    value:string;
+
+    nodeObj:{};
+
+    isReviewer:boolean;
+
+    isApprovePage:boolean;
+
+    handleDropdownOptionsClick:()=>void;
+
+    disabled:boolean;
+
+    isOnlyReviewer:boolean;
+
+    userHasOnlyViewAccess:boolean;
+
+    handleStateValueClick:()=>void;
+}
+

package/src/components/StatusButton/StatusButton.scss

@@ -1,90 +1,90 @@
-@mixin status-colors($bg-color, $text-color) {
-  background-color: $bg-color;
-  color: $text-color;
-}
-
-.ff-status-button {
-  border: none;
-  border-radius: 4px;
-  padding: 0 4px;
-  cursor: pointer;
-  width: 76px;
-  height: 16px;
-
-  &__text {
-    color: inherit;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 76px;
-    text-transform: capitalize;
-  }
-
-  &--passed {
-    @include status-colors(
-      var(--status-button-bg-passed),
-      var(--status-button-text-passed)
-    );
-  }
-
-  &--failed {
-    @include status-colors(
-      var(--status-button-bg-failed),
-      var(--status-button-text-failed)
-    );
-  }
-
-  &--running {
-    @include status-colors(
-      var(--status-button-bg-running),
-      var(--status-button-text-running)
-    );
-  }
-
-  &--skipped {
-    @include status-colors(
-      var(--status-button-bg-skipped),
-      var(--status-button-text-skipped)
-    );
-  }
-
-  &--warning {
-    @include status-colors(
-      var(--status-button-bg-warning),
-      var(--status-button-text-warning)
-    );
-  }
-
-  &--terminated {
-    @include status-colors(
-      var(--status-button-bg-terminated),
-      var(--status-button-text-terminated)
-    );
-  }
-
-  &--partially-executed {
-    @include status-colors(
-      var(--status-button-bg-partiallyExecuted),
-      var(--status-button-text-partiallyExecuted)
-    );
-  }
-
-  &--aborted {
-    @include status-colors(
-      var(--status-button-bg-aborted),
-      var(--status-button-text-aborted)
-    );
-  }
-
-  &--not-executed {
-    @include status-colors(
-      var(--status-button-bg-notExecuted),
-      var(--status-button-text-notExecuted)
-    );
-  }
-
-  &:disabled {
-    opacity: 50%;
-    cursor: not-allowed;
-  }
-}
+@mixin status-colors($bg-color, $text-color) {
+  background-color: $bg-color;
+  color: $text-color;
+}
+
+.ff-status-button {
+  border: none;
+  border-radius: 4px;
+  padding: 0 4px;
+  cursor: pointer;
+  width: 80px;
+  height: 16px;
+
+  &__text {
+    color: inherit;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 76px;
+    text-transform: capitalize;
+  }
+
+  &--passed {
+    @include status-colors(
+      var(--status-button-bg-passed),
+      var(--status-button-text-passed)
+    );
+  }
+
+  &--failed {
+    @include status-colors(
+      var(--status-button-bg-failed),
+      var(--status-button-text-failed)
+    );
+  }
+
+  &--running {
+    @include status-colors(
+      var(--status-button-bg-running),
+      var(--status-button-text-running)
+    );
+  }
+
+  &--skipped {
+    @include status-colors(
+      var(--status-button-bg-skipped),
+      var(--status-button-text-skipped)
+    );
+  }
+
+  &--warning {
+    @include status-colors(
+      var(--status-button-bg-warning),
+      var(--status-button-text-warning)
+    );
+  }
+
+  &--terminated {
+    @include status-colors(
+      var(--status-button-bg-terminated),
+      var(--status-button-text-terminated)
+    );
+  }
+
+  &--partially-executed {
+    @include status-colors(
+      var(--status-button-bg-partiallyExecuted),
+      var(--status-button-text-partiallyExecuted)
+    );
+  }
+
+  &--aborted {
+    @include status-colors(
+      var(--status-button-bg-aborted),
+      var(--status-button-text-aborted)
+    );
+  }
+
+  &--not-executed {
+    @include status-colors(
+      var(--status-button-bg-notExecuted),
+      var(--status-button-text-notExecuted)
+    );
+  }
+
+  &:disabled {
+    opacity: 50%;
+    cursor: not-allowed;
+  }
+}