feat(style): support inverted prop (#418)

Author: arthurdenner

.storybook/preview-body.html

@@ -0,0 +1,5 @@
+<style>
+  body {
+    padding: 0 !important;
+  }
+</style>

README.md

@@ -103,6 +103,7 @@ More examples [here](https://react-semantic-ui-datepickers.now.sh).
 - error
 - iconPosition
 - id
+- inverted
 - label
 - loading
 - name
@@ -177,6 +178,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!

src/components/calendar/calendar.tsx

@@ -11,6 +11,7 @@ import './calendar.css';
 interface CalendarProps extends RenderProps {
   filterDate: (date: Date) => boolean;
   inline: SemanticDatepickerProps['inline'];
+  inverted: SemanticDatepickerProps['inverted'];
   maxDate?: Date;
   minDate?: Date;
   months: Locale['months'];
@@ -43,6 +44,7 @@ const Calendar: React.FC<CalendarProps> = ({
   getDateProps,
   getForwardProps,
   inline,
+  inverted,
   maxDate,
   minDate,
   months,
@@ -56,6 +58,7 @@ const Calendar: React.FC<CalendarProps> = ({
   pointing,
 }) => (
   <Segment
+    inverted={inverted}
     className={cn('clndr-calendars-segment', {
       'clndr-floating': !inline,
       [pointings[pointing]]: !inline,
@@ -73,11 +76,13 @@ const Calendar: React.FC<CalendarProps> = ({
                 <Fragment>
                   <Button
                     icon="angle double left"
+                    inverted={inverted}
                     title={previousYear}
                     {...getBackProps({ calendars, offset: 12 })}
                   />
                   <Button
                     icon="angle left"
+                    inverted={inverted}
                     style={{ marginRight: 0 }}
                     title={previousMonth}
                     {...getBackProps({ calendars })}
@@ -95,11 +100,13 @@ const Calendar: React.FC<CalendarProps> = ({
                 <Fragment>
                   <Button
                     icon="angle right"
+                    inverted={inverted}
                     title={nextMonth}
                     {...getForwardProps({ calendars })}
                   />
                   <Button
                     icon="angle double right"
+                    inverted={inverted}
                     style={{ marginRight: 0 }}
                     title={nextYear}
                     {...getForwardProps({ calendars, offset: 12 })}
@@ -112,6 +119,7 @@ const Calendar: React.FC<CalendarProps> = ({
             {weekdays.map((weekday) => (
               <CalendarCell
                 key={`${calendar.year}-${calendar.month}-${weekday}`}
+                inverted={inverted}
                 title={weekday}
               >
                 {weekday.slice(0, 2)}
@@ -122,7 +130,7 @@ const Calendar: React.FC<CalendarProps> = ({
                 const key = `${calendar.year}-${calendar.month}-${weekIdx}`;
 
                 if (!dateObj) {
-                  return <CalendarCell key={key} />;
+                  return <CalendarCell key={key} inverted={inverted} />;
                 }
 
                 const selectable =
@@ -135,6 +143,7 @@ const Calendar: React.FC<CalendarProps> = ({
                     {...dateObj}
                     {...getDateProps({ dateObj: { ...dateObj, selectable } })}
                     data-testid={`datepicker-cell-${shortDate}`}
+                    inverted={inverted}
                     selectable={selectable}
                   >
                     {dateObj.date.getDate()}
@@ -148,6 +157,7 @@ const Calendar: React.FC<CalendarProps> = ({
     </div>
     {showToday && (
       <TodayButton
+        inverted={inverted}
         {...getToday(minDate, maxDate)}
         {...getDateProps({
           dateObj: getToday(minDate, maxDate),

src/components/cell/cell.css

@@ -6,6 +6,15 @@
   cursor: pointer;
 }
 
+.clndr-cell.inverted {
+  background-color: #4f4f4f;
+}
+
+.clndr-cell.inverted:hover {
+  background-color: #757575;
+  color: inherit;
+}
+
 .clndr-cell:hover {
   background-color: #cacbcd;
   color: inherit;
@@ -20,6 +29,11 @@
   color: inherit;
 }
 
+.clndr-cell-inrange.inverted {
+  background-color: #757575;
+  color: inherit;
+}
+
 .clndr-cell-disabled {
   cursor: default;
   opacity: 0.45;
@@ -29,11 +43,25 @@
   background-color: white;
 }
 
+.clndr-cell-disabled.inverted:hover {
+  background-color: #4f4f4f;
+  color: inherit;
+}
+
 .clndr-cell-selected {
   background-color: #4f4f4f;
   color: #f2f2f2;
 }
 
+.clndr-cell-selected.inverted {
+  background-color: white;
+  color: black;
+}
+
 .clndr-cell-other-month {
   color: #d9d9d9;
 }
+
+.clndr-cell-other-month.inverted {
+  color: #a6a6a6;
+}

src/components/cell/cell.tsx

@@ -6,6 +6,7 @@ type CalendarCellProps = {
   end?: boolean;
   hovered?: boolean;
   inRange?: boolean;
+  inverted?: boolean;
   nextMonth?: boolean;
   prevMonth?: boolean;
   selectable?: boolean;
@@ -19,6 +20,7 @@ const CalendarCell: React.FC<CalendarCellProps> = ({
   end,
   hovered,
   inRange,
+  inverted,
   nextMonth,
   prevMonth,
   selectable,
@@ -29,6 +31,7 @@ const CalendarCell: React.FC<CalendarCellProps> = ({
 }) => (
   <span
     className={cn('clndr-cell', {
+      inverted,
       'clndr-cell-today': today,
       'clndr-cell-disabled': !selectable,
       'clndr-cell-other-month': nextMonth || prevMonth,

src/components/today-button.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import { DateObj } from 'dayzed';
-import { Button } from 'semantic-ui-react';
+import { Button, ButtonProps } from 'semantic-ui-react';
 
-interface TodayButtonProps extends DateObj {
+interface TodayButtonProps extends DateObj, ButtonProps {
   end?: boolean;
   hovered?: boolean;
   inRange?: boolean;

src/index.tsx

@@ -69,7 +69,7 @@ class SemanticDatepicker extends React.Component<
   SemanticDatepickerProps,
   SemanticDatepickerState
 > {
-  static defaultProps = {
+  static defaultProps: SemanticDatepickerProps = {
     allowOnlyNumbers: false,
     clearIcon: 'close',
     clearOnSameDateClick: true,
@@ -97,6 +97,7 @@ class SemanticDatepicker extends React.Component<
     showOutsideDays: false,
     type: 'basic',
     value: null,
+    inverted: false,
   };
 
   el = React.createRef<HTMLDivElement>();
@@ -428,6 +429,7 @@ class SemanticDatepicker extends React.Component<
       pointing,
       filterDate,
       inline,
+      inverted,
       readOnly,
       datePickerOnly,
     } = this.props;
@@ -445,6 +447,7 @@ class SemanticDatepicker extends React.Component<
             {...props}
             {...locale}
             filterDate={filterDate}
+            inverted={inverted}
             pointing={pointing}
             weekdays={this.weekdays}
           />

src/types/index.ts

@@ -68,6 +68,7 @@ export type SemanticDatepickerProps = PickedDayzedProps &
     keepOpenOnSelect: boolean;
     icon?: SemanticICONS | React.ReactElement;
     inline: boolean;
+    inverted: boolean;
     locale: LocaleOptions;
     onBlur: (event?: React.SyntheticEvent) => void;
     onChange: (

stories/index.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { boolean, date, number, select, text } from '@storybook/addon-knobs';
-import { Form, SemanticICONS } from 'semantic-ui-react';
+import { Form, SemanticICONS, Table } from 'semantic-ui-react';
 import 'semantic-ui-css/semantic.min.css';
 import SemanticDatepicker from '../src';
 import { SemanticDatepickerProps } from '../src/types';
@@ -107,24 +107,34 @@ export const withCustomIcons = () => {
   );
 };
 
-export const usageWithForm = () => {
+export const usageWithForm = () => (
+  <Content>
+    <Form>
+      <Form.Group width="equals">
+        <SemanticDatepicker
+          label="Initial date"
+          id="initialDate"
+          onChange={onChange}
+          required
+        />
+        <SemanticDatepicker
+          label="Final date"
+          id="finalDate"
+          onChange={onChange}
+        />
+      </Form.Group>
+    </Form>
+  </Content>
+);
+
+export const inverted = () => {
+  const type = select('Type', typeMap, typeMap.basic);
+
   return (
-    <Content>
-      <Form>
-        <Form.Group width="equals">
-          <SemanticDatepicker
-            label="Initial date"
-            id="initialDate"
-            onChange={onChange}
-            required
-          />
-          <SemanticDatepicker
-            label="Final date"
-            id="finalDate"
-            onChange={onChange}
-          />
-        </Form.Group>
-      </Form>
+    <Content style={{ padding: 20 }}>
+      <Table inverted style={{ margin: 20, padding: 20 }}>
+        <SemanticDatepicker inverted onChange={onChange} type={type} />
+      </Table>
     </Content>
   );
 };