Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

#77 and space between date and time parts #168

Merged
merged 2 commits into from May 17, 2019
Merged

#77 and space between date and time parts #168

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0c2fc7f
#77 and space between date and time parts
AJIXuMuK Mar 2, 2019
9a23d0a
documentation
AJIXuMuK Mar 2, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/documentation/docs/controls/PropertyFieldDateTimePicker.md
View file
Open in desktop
Expand Up @@ -48,7 +48,8 @@ PropertyFieldDateTimePicker('datetime', {
properties: this.properties,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'dateTimeFieldId'
key: 'dateTimeFieldId',
showLabels: false
})
```

Expand All @@ -69,6 +70,7 @@ The `PropertyFieldDateTimePicker` control can be configured with the following p
| key | string | yes | An unique key that indicates the identity of this control. |
| onGetErrorMessage | function | no | The method is used to get the validation error message and determine whether the input value is valid or not. See [this documentation](https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/validate-web-part-property-values) to learn how to use it. |
| deferredValidationTime | number | no | Control will start to validate after users stop typing for `deferredValidationTime` milliseconds. Default value is 200. |
| showLabels | boolean | no | Specify if labels in front of Date and Time parts should be rendered. By default this is set to `true` |

Interface `IDateTimeFieldValue`

Expand Down
5 changes: 5 additions & 0 deletions src/propertyFields/dateTimePicker/IPropertyFieldDateTimePicker.ts
View file
Open in desktop
Expand Up @@ -105,6 +105,11 @@ export interface IPropertyFieldDateTimePickerProps {
* Default value is 200.
*/
deferredValidationTime?: number;

/**
* Specify if labels in front of date and time parts should be rendered. True by default
*/
showLabels?: boolean;
}

/**
Expand Down
6 changes: 5 additions & 1 deletion src/propertyFields/dateTimePicker/PropertyFieldDateTimePicker.ts
View file
Open in desktop
Expand Up @@ -32,6 +32,7 @@ class PropertyFieldDateTimePickerBuilder implements IPropertyPaneField<IProperty
private key: string;
private onGetErrorMessage: (value: string) => string | Promise<string>;
private deferredValidationTime: number = 200;
private showLabels: boolean = true;

/**
* Constructor
Expand Down Expand Up @@ -75,6 +76,8 @@ class PropertyFieldDateTimePickerBuilder implements IPropertyPaneField<IProperty
} else {
this.firstDayOfWeek = DayOfWeek.Sunday;
}

this.showLabels = _properties.showLabels;
}

/**
Expand All @@ -98,7 +101,8 @@ class PropertyFieldDateTimePickerBuilder implements IPropertyPaneField<IProperty
properties: this.customProperties,
key: this.key,
onGetErrorMessage: this.onGetErrorMessage,
deferredValidationTime: this.deferredValidationTime
deferredValidationTime: this.deferredValidationTime,
showLabels: this.showLabels
});
// Calls the REACT content generator
ReactDom.render(element, elem);
Expand Down
4 changes: 4 additions & 0 deletions src/propertyFields/dateTimePicker/PropertyFieldDateTimePickerHost.module.scss
View file
Open in desktop
Expand Up @@ -21,4 +21,8 @@
.fieldLabel {
margin-right: 4px;
}

.spacerRow {
height: 5px;
}
}
97 changes: 57 additions & 40 deletions src/propertyFields/dateTimePicker/PropertyFieldDateTimePickerHost.tsx
View file
Open in desktop
Expand Up @@ -75,6 +75,11 @@ class DatePickerStrings implements IDatePickerStrings {
* Renders the controls for PropertyFieldDateTimePicker component
*/
export default class PropertyFieldDateTimePickerHost extends React.Component<IPropertyFieldDateTimePickerHostProps, IPropertyFieldDateTimePickerHostState> {

public static defaultProps = {
showLabels: true
};

private _latestValidateValue: string;
private async: Async;
private delayedValidate: (value: IDateTimeFieldValue) => void;
Expand Down Expand Up @@ -282,58 +287,67 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
// Defines the DatePicker control labels
const dateStrings: DatePickerStrings = new DatePickerStrings();

const {
showLabels,
disabled,
timeConvention,
dateConvention,
label
} = this.props;

// Check if the time element needs to be rendered
let timeElm: JSX.Element = <tr />;
if (this.props.dateConvention === DateConvention.DateTime) {
timeElm = (<tr>
<td className={styles.labelCell}>
<Label className={styles.fieldLabel}>{strings.DateTimePickerTime}</Label>
</td>
<td>
<table cellPadding='0' cellSpacing='0'>
<tbody>
<tr>
<td>
<HoursComponent
disabled={this.props.disabled}
timeConvention={this.props.timeConvention}
value={this.state.hours}
onChange={this._dropdownHoursChanged} />
</td>
<td className={styles.seperator}><Label>:</Label></td>
<td>
<MinutesComponent
disabled={this.props.disabled}
value={this.state.minutes}
onChange={this._dropdownMinutesChanged} />
</td>
<td className={styles.seperator}><Label>:</Label></td>
<td>
<SecondsComponent
disabled={this.props.disabled}
value={this.state.seconds}
onChange={this._dropdownSecondsChanged} />
</td>
</tr>
</tbody>
</table>
</td>
</tr>);
if (dateConvention === DateConvention.DateTime) {
timeElm = (
<tr>
{showLabels && <td className={styles.labelCell}>
<Label className={styles.fieldLabel}>{strings.DateTimePickerTime}</Label>
</td>}
<td>
<table cellPadding='0' cellSpacing='0'>
<tbody>
<tr>
<td>
<HoursComponent
disabled={disabled}
timeConvention={timeConvention}
value={this.state.hours}
onChange={this._dropdownHoursChanged} />
</td>
<td className={styles.seperator}><Label>:</Label></td>
<td>
<MinutesComponent
disabled={disabled}
value={this.state.minutes}
onChange={this._dropdownMinutesChanged} />
</td>
<td className={styles.seperator}><Label>:</Label></td>
<td>
<SecondsComponent
disabled={disabled}
value={this.state.seconds}
onChange={this._dropdownSecondsChanged} />
</td>
</tr>
</tbody>
</table>
</td>
</tr>);
}

// Renders content
return (
<div className={styles.propertyFieldDateTimePicker}>
{this.props.label && <Label>{this.props.label}</Label>}
{label && <Label>{label}</Label>}
<table cellPadding='0' cellSpacing='0'>
<tbody>
<tr>
<td className={styles.labelCell}>
{showLabels && <td className={styles.labelCell}>
<Label className={styles.fieldLabel}>{strings.DateTimePickerDate}</Label>
</td>
</td>}
<td>
<DatePicker
disabled={this.props.disabled}
disabled={disabled}
value={this.state.day}
strings={dateStrings}
isMonthPickerVisible={true}
Expand All @@ -342,7 +356,10 @@ export default class PropertyFieldDateTimePickerHost extends React.Component<IPr
firstDayOfWeek={this.props.firstDayOfWeek} />
</td>
</tr>

{!!timeElm &&
<tr>
<td className={styles.spacerRow} colSpan={showLabels ? 2 : 1}></td>
</tr>}
{timeElm}
</tbody>
</table>
Expand Down
3 changes: 2 additions & 1 deletion src/webparts/propertyControlsTest/PropertyControlsTestWebPart.ts
View file
Open in desktop
Expand Up @@ -376,7 +376,8 @@ export default class PropertyControlsTestWebPart extends BaseClientSideWebPart<I
properties: this.properties,
onGetErrorMessage: null,
deferredValidationTime: 0,
key: 'dateTimeFieldId'
key: 'dateTimeFieldId',
showLabels: false
}),
PropertyPaneToggle("isColorFieldVisible", {
label: "Color Field Visible",
Expand Down