forstok-ui-lib 5.2.31 → 5.2.37

package/src/components/date/styles.ts

@@ -0,0 +1,401 @@
+import styled, { css } from 'styled-components';
+import { dropBase } from '../../assets';
+
+const DateRangeWrapperStyles = css`
+  align-items: center;
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
+  height: 100%;
+`
+const SelectionDateActiveStyles = css`
+  background-color: var(--act-clr-bg); 
+  color: var(--sec-clr);
+`
+const getSelectionDateModifiedStyled = ({ $activated }:{ $activated?: boolean }) => {
+  if ($activated) {
+    return SelectionDateActiveStyles
+  }
+}
+const getDateRangeMenuContainerModifiedStyled = ({ $mode }:{ $mode: string} ) => {
+  let style = ``
+  if ($mode === 'filterorder') {
+    style += `
+      width: auto;
+      transform: translateX(-50%);
+      ${DateRangeSelection} {
+        text-align: center;
+      }
+      @media (min-width: 768px) {
+        width: auto;
+        left: 50% !important;
+        transform: translateX(-50%);
+      }
+      @media (min-width: 1024px) {
+        width: auto;
+      }
+      @media (min-width: 1280px) {
+        width: 660px;
+        ${DateRangeSelection} {
+          text-align: left;
+        }
+      }
+    `
+  } else if ($mode ==='filterdashboard') {
+    style += `
+      width: auto;
+      left: 50% !important;
+      transform: translateX(-50%);
+      ${DateRangeSelection} {
+        text-align: center;
+      }
+      @media (min-width: 768px) {
+        width: auto;
+        left: 50% !important;
+        transform: translateX(-50%);
+      }
+      @media (min-width: 1024px) {
+        width: auto;
+      }
+      @media (min-width: 1280px) {
+        width: 660px;
+        left: 0 !important;
+        transform: none;
+        ${DateRangeSelection} {
+          text-align: left;
+        }
+      }
+    `
+  } else if ($mode === 'filterordertofulfill') {
+    style += ` 
+      width: auto;
+      left: 50% !important;
+      transform: translateX(-50%);
+      ${DateRangeSelection} {
+        text-align: center;
+      }
+      @media (min-width: 768px) {
+        width: auto;
+        left: unset !important;
+        right: 0;
+        transform: none;
+      }
+      @media (min-width: 1024px) {
+        width: auto;
+      }
+      @media (min-width: 1280px) {
+        width: 660px;
+        ${DateRangeSelection} {
+          text-align: left;
+        }
+      }
+    `
+  } else if ($mode === 'popuppayment') {
+    style += `
+      width: auto;
+      border-radius: var(--ter-rd);
+    `
+  }
+  return style
+}
+const getDateRangeControlModifiedStyled = ({ $mode, $size }:{ $mode: string, $size?: string }) => {
+  let style = ``
+  if ($size === 'small') {
+    style += `height: 30px;`
+  } else {
+    style += `height: 36px;`
+  }
+  if ($mode === 'filterorder' || $mode === 'filterdashboard' || $mode === 'filterordertofulfill') {
+    style += `
+      height: auto;
+      border: none;
+    `
+  } else if ($mode === 'popuppayment') {
+    style += `
+      height: 30px;
+      border-radius: var(--ter-rd);
+      background-color: hsl(0,0%,100%);
+      & ${DateRangeLabel} {
+        color: var(--inp-clr);
+        padding-bottom: 0;
+      }
+      & ${DateRangeIndicatorsContainer} {
+        padding: 0 4px;
+      }
+    `
+  }
+  return style
+}
+const getDateRangeContainerModifiedStyled = ({ $mode }:{ $mode: string }) => {
+  let style = `
+    &.is-shown {
+      & ${DateRangeMenuContainer} {
+        display: block;
+      }
+      > div button { box-shadow: var(--act-shd-bx); }
+    }
+  `
+  if ($mode === 'filter') {
+    style += `
+      width: 100%;
+      & ${DateRangeMenuContainer} {
+        width: 100%;
+        margin-left: 16px;
+        @media (min-width: 768px) {
+          width: calc(40vw - 32px);
+        }
+      }
+      & ${DateRangeControl}, 
+      & ${DateRangeLabelContainer}, 
+      & ${DateRangeIndicatorsContainer} {
+        height: 14px;
+      }
+      & ${DateRangeLabelContainer} {
+        margin-left: 15px;
+      }
+      & ${DateRangeControl} {
+        border: 0;
+      }
+      & ${DateRangeLabel} {
+        padding-top: 3px;
+      }
+      & ${DateRangeIndicatorsContainer} {
+        margin-top: -5px;
+      }
+      & ${DateRangeIndicatorsArrowIconSvg} {
+        fill: #429ddf;
+      }
+      & .DateRangePicker__Month {
+        @media (min-width: 768px) {
+          width: calc((40vw - 182px) / 2);
+          margin: 0 10px;
+        }
+        @media (min-width: 1280px) {
+          width: calc((40vw - 234px) / 2);
+          margin: 0 20px;
+        }
+      }
+      ._refCheckboxContainer {
+        position: absolute; 
+        top: 7px;
+        left: 0;
+      }
+      @media (min-width: 768px) {
+        width: 100%;
+      }
+    `
+  } else if ($mode === 'filterorder' || $mode === 'filterdashboard' || $mode === 'filterordertofulfill') {
+    style += `
+      width: auto !important;
+    `
+  } else if ($mode === 'popuppayment') {
+    style += ` 
+      width: 100% !important;
+      &.is-shown {
+        > div {
+          border: 1px solid var(--pri-clr-ln__fc) !important; 
+        }
+      }
+    `
+  }
+  return style
+}
+const getDateRangeLabelModifiedStyled = ({ $size }: { $size?: string }) => {
+  if ($size === 'small') {
+    return `
+      font-size: 14px;
+    `
+  }
+}
+const getDatePickerContainerModifiedStyled = ({ $isError }:{ $isError?: boolean }) => {
+  if ($isError) {
+    return `
+      input { 
+        border:1px solid var(--err-clr-ln) !important; 
+      }
+    `
+  }
+}
+
+export const DateRangeMenuContainer = styled.section<{ $mode: string }>`
+  ${dropBase}
+  top:100%;
+  margin: 8px 0;
+  position:absolute;
+  z-index: 999;
+  width: 100%;
+  display: none;
+  @media (min-width: 768px) {
+    width: 45vw;
+  }
+  @media (min-width: 1024px) {
+    width: 39vw;
+  }
+  @media (min-width: 1280px) {
+    width: 660px;
+  }
+  ${getDateRangeMenuContainerModifiedStyled}
+`
+export const DateRangeControl = styled.div<{ $mode: string, $size?: string }>`
+  ${DateRangeWrapperStyles}
+  border: 1px solid var(--ck-clr-ln);
+  border-radius: var(--ter-rd);
+  cursor: pointer;
+  justify-content: space-between;
+  ${getDateRangeControlModifiedStyled}
+`
+export const DateRangeContainer = styled.section<{ $mode: string }>`
+  position: relative;
+  display: inline-grid;
+  width: 100%;
+  @media (min-width: 1024px) {
+    width: 220px;
+  }
+  @media (min-width: 1280px) {
+    width: 305px;
+  }
+  ${getDateRangeContainerModifiedStyled}
+`
+export const DateRangeLabelContainer = styled.div`
+  ${DateRangeWrapperStyles}
+  padding: 0 8px;
+  position: relative;
+  overflow: hidden;
+
+`
+export const DateRangeLabel = styled.div<{ $size?: string }>`
+  position: absolute;
+  top: 50%;
+  max-width: calc(100% - 8px);
+  color: initial;
+  margin: 0 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform: translateY(-50%);
+  padding-bottom: 2px;
+  font-weight: 400;
+  ${getDateRangeLabelModifiedStyled}
+`
+export const DateRangeIndicatorsContainer= styled.div`
+  color: #757575;
+  display: flex;
+  padding: 0 8px;
+  transition: color 150ms;
+`
+export const DateRangeIndicatorsArrowIconSvg= styled.svg`
+  display: inline-block;
+  fill: currentColor;
+  stroke: currentColor;
+  stroke-width: 0;
+`
+export const DateRangeMenu = styled.div`
+  display: grid;
+  grid-auto-flow: row;
+  justify-content: center;
+  @media (min-width: 1280px) {
+    grid-template-columns: 112px 1fr;
+  }
+`
+export const DateRangeSelection = styled.aside`
+  display: inline-grid;
+  grid-auto-flow: column;
+  border-bottom: 1px solid rgba(0, 0, 0, .1);
+  align-items: start;
+  font-size: 14px;
+  @media (min-width: 1280px) {
+    grid-auto-flow: row;
+    grid-template-rows: repeat(5, 35px [row-start]);
+    grid-row-gap: 1px;
+    border-right: 1px solid rgba(0, 0, 0, .1);
+    border-bottom: 0;
+    align-items: center;
+  }
+`
+export const SelectionDate = styled.div<{ $activated?: boolean }>`
+  cursor: pointer;
+  display: grid;
+  justify-self: stretch;
+  padding: 10px 8px;
+  border-right: 1px solid rgba(0, 0, 0, .1);
+  height: 100%;
+  align-items: center;
+  &:hover {
+    background-color: #ec5b62; 
+    color: #fff;
+  }
+  @media (min-width: 1280px) {
+    height: auto;
+    border-right: 0;
+  }
+  ${getSelectionDateModifiedStyled}
+`
+export const DateRangeAside = styled.aside`
+  display: grid;
+  width: 100%;
+  grid-column-gap: 10px;
+  grid-row-gap: 0;
+  padding: 8px;
+  border-top: 1px solid rgba(0, 0, 0, .1);
+  justify-items: right;
+  grid-auto-flow: column;
+  grid-template-columns: 1fr max-content;
+  justify-content: right;
+  align-items: center;
+  > div {
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: 8px;
+  }
+`
+export const DateContainer = styled.div<{ $isError?: boolean }>`
+  position: relative;
+  .react-datepicker-wrapper {  
+    width: 100%; 
+  }
+  ${getDatePickerContainerModifiedStyled}
+`
+export const DateIndicatorContainer = styled.div`
+  position: absolute; 
+  top: 5px;
+  right: 2px;
+  display: flex;
+  transition: color 150ms;
+  color: hsl(0, 0%, 80%);
+  padding: 0;
+  box-sizing: border-box;
+  min-height: 1px;
+  cursor: pointer;
+  &:hover {
+    color: hsl(0, 0%, 60%);
+  }
+  svg {
+    display: inline-block;
+    fill: currentColor;
+    line-height: 1;
+    stroke: currentColor;
+    stroke-width: 0;
+  }
+`
+export const DatePickerContainer = styled.div<{ $isError?: boolean }>`
+  .react-datepicker-wrapper { 
+    width: 100%; 
+  }
+  ${getDatePickerContainerModifiedStyled}
+`
+export const DateRangePortalContainer = styled.div`
+  display: inline-block;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 999;
+  &.is-shown {
+    & ${DateRangeMenuContainer} { 
+      display: block; 
+    }
+  }
+`
+export const DateRangeIconContainer = styled.div`
+  display: flex;
+  padding: 0 0 0 12px;
+`

package/src/components/date/typed.ts

@@ -0,0 +1 @@
+export type TModerateDateFunction = (startDateObj: string, endDateObj: string, rangeDateObj: string, callback: () => void) => void;

package/src/components/index.ts

@@ -20,11 +20,13 @@ export { default as UploadComponent } from './upload';
 export { default as UploadDragDropComponent } from './upload/drag_drop';
 export { default as TextAreaComponent } from './textarea';
 export { default as TextAreaRefComponent } from './textarea/ref'; 
+export { default as DateRangeComponent } from './date/daterange';
 
 export * from './dropdown/typed';
 export * from './message/typed';
 export * from './popup/typed';
 export * from './select/typed';
+export * from './date/typed';
 
 export * from './form/styles';
 

package/src/index.ts

@@ -2,4 +2,5 @@
 
 export * from './components';
 export * from './assets';
-export * from './typeds';
+export * from './typeds';
+export * from './maps';

package/src/maps/common.ts

@@ -0,0 +1,10 @@
+import moment from 'moment';
+import { dateRangeDays } from '../assets/javascripts/helper';
+
+export const configDateRange = {
+  rangeDate: 'lastsecondweek', 
+  startDate: moment().clone().subtract(13, 'days').format('YYYY-MM-DD') as string, 
+  endDate:  moment().clone().format('YYYY-MM-DD') as string, 
+  placeholder: 'Last 14 days',
+  minDate: moment().clone().subtract(dateRangeDays('lastquart'), 'days').format('YYYY-MM-DD') as string
+}

package/src/maps/index.ts

@@ -0,0 +1 @@
+export  * from './common';