Skip to content

Commit

Permalink
Feature/single date picker
Browse files Browse the repository at this point in the history
* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* FIx yarn.lcok

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* WIP

* inline date picker

* WIP

* added bg white for calendar

* WIP

* update docz

* WIP

* wip

* WIP

* WIP

* WIP

* WIP

* docz doc

* doc renaming

* WIP

* WIP

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip
  • Loading branch information
patricklafrance authored Sep 16, 2019
1 parent 03d8a7d commit 0f398bb
Show file tree
Hide file tree
Showing 80 changed files with 4,494 additions and 2,723 deletions.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ When available, you should use a component from [Semantic UI React](https://reac
|--------|-------|------------|
| [@orbit-ui/semantic-ui-theme](/packages/semantic-ui-theme) | [![npm](https://img.shields.io/npm/v/@orbit-ui/semantic-ui-theme.svg?maxAge=3600)](https://www.npmjs.com/package/@orbit-ui/semantic-ui-theme) | [![Dependency Status](https://img.shields.io/david/gsoft-inc/sg-orbit.svg?path=packages/semantic-ui-theme)](https://david-dm.org/gsoft-inc/sg-orbit.svg?path=packages/semantic-ui-theme) |
| [@orbit-ui/react-components](/packages/react-components) | [![npm](https://img.shields.io/npm/v/@orbit-ui/react-components.svg?maxAge=3600)](https://www.npmjs.com/package/@orbit-ui/react-components) | [![Dependency Status](https://img.shields.io/david/gsoft-inc/sg-orbit.svg?path=packages/react-components)](https://david-dm.org/gsoft-inc/sg-orbit.svg?path=packages/react-components) |
| [@orbit-ui/react-date-range-picker](/packages/react-components/components/date-range-picker) | [![npm](https://img.shields.io/npm/v/@orbit-ui/react-date-range-picker.svg?maxAge=3600)](https://www.npmjs.com/package/@orbit-ui/react-date-range-picker) | [![Dependency Status](https://img.shields.io/david/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/date-range-picker)](https://david-dm.org/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/date-range-picker) |
| [@orbit-ui/react-date-picker](/packages/react-components/components/date-picker) | [![npm](https://img.shields.io/npm/v/@orbit-ui/react-date-picker.svg?maxAge=3600)](https://www.npmjs.com/package/@orbit-ui/react-date-picker) | [![Dependency Status](https://img.shields.io/david/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/date-picker)](https://david-dm.org/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/date-picker) |
| [@orbit-ui/react-multi-select](/packages/react-components/components/multi-select) | [![npm](https://img.shields.io/npm/v/@orbit-ui/react-multi-select.svg?maxAge=3600)](https://www.npmjs.com/package/@orbit-ui/react-multi-select) | [![Dependency Status](https://img.shields.io/david/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/multi-select)](https://david-dm.org/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/multi-select) |
| [@orbit-ui/react-search-input](/packages/react-components/components/search-input) | [![npm](https://img.shields.io/npm/v/@orbit-ui/react-search-input.svg?maxAge=3600)](https://www.npmjs.com/package/@orbit-ui/react-search-input) | [![Dependency Status](https://img.shields.io/david/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/search-input)](https://david-dm.org/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/search-input) |
| [@orbit-ui/react-popup](/packages/react-components/components/popup) | [![npm](https://img.shields.io/npm/v/@orbit-ui/react-popup.svg?maxAge=3600)](https://www.npmjs.com/package/@orbit-ui/react-popup) | [![Dependency Status](https://img.shields.io/david/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/popup)](https://david-dm.org/gsoft-inc/sg-orbit.svg?path=packages/react-components/components/popup) |
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
"react-spring": "8.0.27",
"rimraf": "3.0.0",
"semantic-ui": "2.4.2",
"semantic-ui-react": "0.88.0",
"semantic-ui-react": "0.88.1",
"shelljs": "0.8.3",
"styled-jsx": "3.2.1",
"stylelint": "10.1.0",
Expand Down
2 changes: 0 additions & 2 deletions packages/icons/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,4 @@ export { ReactComponent as AddIcon } from "./icon-add.svg";
export { ReactComponent as ArrowIcon } from "./icon-arrow.svg";
export { ReactComponent as ArrowFullIcon } from "./icon-arrow-full.svg";
export { ReactComponent as ClearIcon } from "./icon-clear.svg";
export { ReactComponent as InputCalendarIcon } from "./icon-input-calendar.svg";
export { ReactComponent as MagnifierIcon } from "./icon-magnifier.svg";
export { ReactComponent as PresetsCalendarIcon } from "./icon-presets-calendar.svg";
6 changes: 2 additions & 4 deletions packages/react-components/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Individual packages are available in the [components](/components) directory.
import { DateRangePicker, MultiSelect, ... } from "@orbit-ui/react-components";
```

https://sg-orbit.netlify.com
Full documentation available at: https://sg-orbit.netlify.com

## Maintainers

Expand Down Expand Up @@ -159,7 +159,7 @@ export class DateRangePicker extends AutoControlledPureComponent {
}

// usage
import { DateRangePicker } from "@orbit-ui/react-date-range-picker";
import { DateRangePicker } from "@orbit-ui/react-components";

<DateRangePicker.Input />
```
Expand Down Expand Up @@ -220,8 +220,6 @@ For more information, read the following posts:

All available props should be defined in the root component with [prop-types](https://github.com/facebook/prop-types). For most required props, instead of defining the prop as required with prop-types, you should instead provide a default value.

All default props should be defined in the root component.

### Naming

#### Event handlers props
Expand Down
Original file line number Diff line number Diff line change
@@ -1,48 +1,46 @@
# @orbit-ui/react-date-range-picker
# @orbit-ui/react-date-picker

## Installation

With npm:

```bash
npm install react-spring moment @orbit-ui/semantic-ui-theme semantic-ui-react @orbit-ui/react-date-range-picker
npm install react-spring moment @orbit-ui/semantic-ui-theme semantic-ui-react @orbit-ui/react-date-picker
```

## Usage

```javascript
import {
DateRangePicker,
DateRangePicker,
SingleDatePicker,
InlineSingleDatePicker,
toPreset,
LAST_WEEK_PRESET,
LAST_MONTH_PRESET,
LAST_3_MONTHS_PRESET,
LAST_6_MONTHS_PRESET,
LAST_12_MONTHS_PRESET,
DEFAULT_DATES_PRESETS,
ANCHOR_LEFT,
ANCHOR_RIGHT
} from "@orbit-ui/react-date-range-picker";
TOP_LEFT,
TOP_RIGHT,
TOP_CENTER,
BOTTOM_LEFT,
BOTTOM_RIGHT,
BOTTOM_CENTER
} from "@orbit-ui/react-date-picker";
```

Or

```javascript
import {
DateRangePicker,
toPreset,
LAST_WEEK_PRESET,
LAST_MONTH_PRESET,
LAST_3_MONTHS_PRESET,
LAST_6_MONTHS_PRESET,
LAST_12_MONTHS_PRESET,
DEFAULT_DATES_PRESETS,
ANCHOR_LEFT,
ANCHOR_RIGHT
...
} from "@orbit-ui/react-components";
```

https://sg-orbit.netlify.com
Full documentation available at: https://sg-orbit.netlify.com

## License

Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@orbit-ui/react-date-range-picker",
"version": "1.1.7",
"description": "Sharegate Orbit UI React date range picker component",
"name": "@orbit-ui/react-date-picker",
"version": "1.0.0",
"description": "Sharegate Orbit UI React date picker components",
"repository": "https://github.com/gsoft-inc/sg-brand.git",
"author": "Groupe Sharegate inc.",
"license": "Apache-2.0",
Expand Down
File renamed without changes
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
export { ReactComponent as InputCalendarIcon } from "./icon-input-calendar.svg";
export { ReactComponent as PresetsCalendarIcon } from "./icon-presets-calendar.svg";
Original file line number Diff line number Diff line change
@@ -0,0 +1,90 @@
import { BOTTOM_LEFT, POSITIONS, isBottom, isCenter, isLeft, isRight, isTop } from "./positions";
import { FadeIn } from "./fade-in";
import { Popup } from "@orbit-ui/react-popup";
import { PureComponent } from "react";
import { arrayOf, bool, func, node, number, oneOf, string } from "prop-types";
import { isNil } from "lodash";
import { useHandlerProxy } from "@orbit-ui/react-components-shared";

export class DatePickerAnchor extends PureComponent {
static propTypes = {
input: node.isRequired,
inputHeight: number,
calendar: node.isRequired,
open: bool.isRequired,
position: oneOf(POSITIONS),
offsets: arrayOf(string),
onOutsideClick: func.isRequired,
onEscapeKeyDown: func.isRequired,
disabled: bool.isRequired
};

static defaultProps = {
position: BOTTOM_LEFT,
offsets: ["0px", "10px"]
};

handleOutsideClick = useHandlerProxy(this, "onOutsideClick");
handleEscapeKeyDown = useHandlerProxy(this, "onEscapeKeyDown");

getHorizontalPosition() {
const { position, offsets } = this.props;

if (isLeft(position)) {
return { left: "0px", offsetX: offsets[0] };
}
else if (isRight(position)) {
return { right: "0px", offsetX: offsets[0] };

}
else if (isCenter(position)) {
return { left: "50%", offsetX: `calc(-50% + ${offsets[0]})` };
}

return {};
}

getVerticalPosition() {
const { position, offsets, inputHeight } = this.props;

if (isBottom(position)) {
return { top: `${inputHeight}px`, offsetY: offsets[1] };
}
else if (isTop(position)) {
return { bottom: `${inputHeight}px`, offsetY: `-${offsets[1].startsWith("-") ? offsets[1].substring(1) : offsets[1]}` };
}

return {};
}

getCssClasses() {
const { className } = this.props;

const defaultClasses = "relative";

return isNil(className) ? defaultClasses : `${defaultClasses} ${className}`;
}

render() {
const { input, inputHeight, calendar, open, disabled } = this.props;

return (
<div className={this.getCssClasses()}>
{input}
<If condition={!isNil(inputHeight) && !disabled}>
<FadeIn active={open}>
<Popup
visible={open}
onOutsideClick={this.handleOutsideClick}
onEscapeKeyDown={this.handleEscapeKeyDown}
{...this.getHorizontalPosition()}
{...this.getVerticalPosition()}
>
{calendar}
</Popup>
</FadeIn>
</If>
</div>
);
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,85 +2,64 @@ import { Button } from "semantic-ui-react";
import { PureComponent } from "react";
import { bool, func, string } from "prop-types";
import { isNil } from "lodash";
import momentPropTypes from "react-moment-proptypes";

export class DateRangePickerButtons extends PureComponent {
export class DatePickerButtons extends PureComponent {
static propTypes = {
startDate: momentPropTypes.momentObj,
endDate: momentPropTypes.momentObj,
canClear: bool.isRequired,
canApply: bool.isRequired,
onClear: func,
onApply: func,
allowSingleDateSelection: bool,
allowClear: bool,
clearText: string,
applyText: string,
className: string
};

static defaultProps = {
clearText: "Clear",
applyText: "Apply"
};

handleClear = event => {
const { onClear } = this.props;
const { canClear, onClear } = this.props;

if (this.canClear()) {
if (canClear) {
onClear(event, this.props);
}
};

handleApply = event => {
const { onApply } = this.props;
const { canApply, onApply } = this.props;

if (this.canApply()) {
if (canApply) {
onApply(event, this.props);
}
};

canClear() {
const { startDate, endDate } = this.props;

return !isNil(startDate) || !isNil(endDate);
}

canApply() {
const { startDate, endDate, allowSingleDateSelection } = this.props;

if (allowSingleDateSelection) {
return true;
}

if (isNil(startDate) && isNil(endDate)) {
return true;
}

if (!isNil(startDate) && !isNil(endDate)) {
return true;
}

return false;
}

renderClearButton() {
const { allowClear, clearText } = this.props;
const { canClear, allowClear, clearText } = this.props;

if (!allowClear) {
return null;
}

// Must used a CSS class to hide the button instead of conditional rendering otherwise clicking the button will be considered an outside click.
return (
<Button onClick={this.handleClear} className={!this.canClear() ? "ghost short disabled" : "ghost short"}>
<Button onClick={this.handleClear} className={!canClear ? "ghost short disabled" : "ghost short"}>
{clearText}
</Button>
);
}

renderApplyButton() {
const { applyText } = this.props;
const { canApply, applyText } = this.props;


return (
// Sadly, the div container is necessary to apply styled-jsx. Fragment doesn't work.
<div className="container">
{/* Must used a CSS class to hide the button instead of conditional rendering otherwise clicking the button will be considered an outside click. */}
<Button onClick={this.handleApply} className={!this.canApply() ? "ghost short disabled" : "primary ghost short"}>
<Button onClick={this.handleApply} className={!canApply ? "ghost short disabled" : "primary ghost short"}>
{applyText}
</Button>

Expand Down
Loading

0 comments on commit 0f398bb

Please sign in to comment.